<template>
  <!-- 为了恢复这个页面时，能还原他的滚动条的位置
  1.监听用户的滚动，保存下来当前的位置
  2.再次回来，页面恢复的时候，重置滚动条的位置-->
  <div class='scroll-wrapper' @scroll="hScroll" ref="refScroll">
    <!-- 只要被van-pull-refresh包起来就可以下拉刷新 -->
    <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
      <!-- van-list自带上拉加载的效果
      1.数据项在list中
      2.显示数据时，数据如果不够一屏，会自动调用onload去加载数据
      3.在onLoad中，通过ajax取回数据，添加到list中，把loading手动设置为false
      4.如果所有的数据全部加载完成，则把finished设为true
      5.手动上拉，也会调用onLoad
      -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
        v-for="(item, idx) in list"
        :key="idx"
        :title="item.title"
        @click="$router.push('/article/' + item.art_id.toString())">
          <!-- van-cell有一个名为label的插槽，用来设置标题正下方的内容 -->
          <div slot="label">
            <!-- 图片 用宫格来做，有几张图就用几个宫格 :border="false"取消宫格的边框线-->
            <van-grid :column-num="item.cover.images.length" :border="false">
              <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx" >
                <van-image lazy-load :src="img"></van-image>
              </van-grid-item>
            </van-grid>
            <!-- 文字说明 -->
            <div class="meta">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <!-- dayjs相对时间+全局过滤器处理时间 -->
              <span>{{item.pubdate | relativeTime}}</span>
              <!-- 关闭按钮 ,只有登录才能看到
              - 给按钮添加事件，emit事件到父组件index.vue
              - 在父组件index.vue中监听事件，并在响应函数中去显示moreAction
              -->
              <span class="close" @click.stop="hClose(item)" v-if="$store.state.tokenInfo.token">
                <van-icon name="cross">
              </van-icon></span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js';
export default {
  name: 'ArticleList',
  props: ['channel'],
  data () {
    return {
      list: [],
      loading: false, // 是否上拉加载
      finished: false, // 上拉加载是否已加载全部数据
      timestamp: null,
      isLoadingNew: false // 是否下拉刷新
    };
  },
  computed: { },
  // 局部过滤器,只能在当前组件中使用
  // 对于时间格式化这种普遍使用的过滤器最好使用全局过滤器
  // filters: {
  //   myfilter: function (val) {
  //     return val + '条评论';
  //   },
  //   relativeTime: relativeTime
  // },
  created () {
    // 监听事件总线是否有delArticle事件发布
    // 当事件发生时，在回调函数中，接收参数
    this.$eventBus.$on('delArticle', obj => {
      console.log('收到delArticle事件', obj);
      const { channelId, articleId } = obj;
      // 判断是否需要从本组件中的list中删除编号为articleId的文章
      // this.channel.id是通过父组件的props传入的
      if (channelId !== this.channel.id) return;
      // 找下标
      const idx = this.list.findIndex(it => it.art_id.toString() === articleId);
      if (idx !== -1) {
        // 找到了，删除它
        this.list.splice(idx, 1);
      }
    });
  },
  mounted () { },
  activated () {
    console.log('activated', this.scrollTop);
    // 组件激活时，重置滚动条
    if (this.scrollTop && this.$refs.refScroll) {
      this.$refs.refScroll.scrollTop = this.scrollTop;
    }
  },
  deactivated () {
    // 测试测试测试，为啥线上还是空白页，哭了
    console.log('deactivated');
  },
  methods: {
    // 监听滚动事件
    hScroll (event) {
      console.log('滚动事件', event.target.scrollTop);
      // 记录滚动条当前的位置
      // scrollTop不需要双向绑定，不需要放在data数据项里。
      this.scrollTop = event.target.scrollTop;
    },
    // 用户点击了某个文章的关闭按钮
    hClose (article) {
      // 向父组件index.vue抛出事件，在父组件中监听事件。并在响应函数中去显示moreAction
      // 通知父组件去弹层
      this.$emit('showMoreAction', article.art_id.toString());
      // 大数处理,在响应拦截器里用json-bigint插件处理
      console.log('点了更多操作的文章id', article.art_id.toString());
    },
    async onRefresh () {
      // 发请求取回最新的数据
      const result = await getArticles(this.channel.id, Date.now());
      // 把最新的数据追加到list的开头
      this.list.unshift(...result.data.data.results);

      // 更新下拉刷新状态
      this.isLoadingNew = false;
      this.$toast.success('刷新成功' + result.data.data.results.length + '条');
    },
    // onLoad触发时机：
    // 1.vant-list内容不足一屏自动调用
    // 2.手动上拉
    async onLoad () {
      console.log('当前数据条数', this.list.length);
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }
      const result = await getArticles(this.channel.id, this.timestamp);
      // 在onLoad中，通过ajax取回数据，追加到list中，把loading手动设置为false
      // this.list.push(...res.data.data.results);
      this.list = this.list.concat(result.data.data.results);
      // 保存本次请求回来的数据中的时间戳，以便下次传入
      this.timestamp = result.data.data.pre_timestamp;
      // 加载状态结束
      this.loading = false;
      // 如果所有的数据全部加载完成，即本次取不到数据了，则把finished设为true
      if (result.data.data.results.length === 0) {
        this.finished = true;
      }
    }
  }
};
</script>

<style scoped lang='less'>
.meta {
  display:flex;
  span {
    margin-right:10px;
  }
  .close{
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
